<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
    <head>
        <title>商城首页</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            *{
                margin: 0;
                padding: 0;
                border: 0 none;
                font-family: 微软雅黑;
            }
            div{
                margin: 0;
                padding: 0;
            }
            a  {
                text-decoration: none;
                color: black;
            }
            ul li{
                list-style: none;
            }
            .content>div{
                width: 1240px;
            }
            .content-up >div{
                float: left;
            }
            .content-up a>div{
                float: left;
                color: #9f9f9f;
                padding-right:5px;
            }
            .content-down>div{
                float: left;
                height: 540px;
            }
            .content-left>div{
                width: 240px;
            }
            .content-main{
                width: 740px;
                position: relative;

            }
            .content-main>div{
                width: 245px;
                height: 269px;
                background-color: #ffffff;
                float:left
            }
            .content-main>div div{
                height: 20px;
                line-height: 20px;
                text-align: center;
                margin-top:5px;
            }
            .content-right >div>div{
                border-bottom: 1px solid #f6f6f6;
                width: 220px;
                height: 114px;
                position: relative;
            }
            .content-nav>div{
                font-size: 12px;
                overflow: hidden;
                white-space: nowrap;
                margin-bottom: 10px;
            }
            .footer-up>div{
                width: 309px;
                height: 60px;
                margin: 15px auto;
                line-height: 60px;
                float: left;
                /*text-align: center;*/
                border-right: 1px solid #9f9f9f;
                position: relative;
            }
            .footer-main >div{
                width: 200px;
                height: 210px;
                float: left;
            }
            .footer-main  a>div{
                font-size: 12px;
                color: #6f6f6f;
                margin-top: 20px;
            }
        </style>
        <script src = 'script/jquery-1.10.2.min.js'></script>
        <script>
            jQuery(function($) {
                //指前台页面向后台服务器发送一个请求(就是服务器的一个地址)
                //get参数 1：服务器地址 2:[请求参数] 3:回调方法 夹带一个服务器返回的结果
                //post
                //getJSON
                //getScript
                $.getJSON('back.txt', {'a':'1', 'b':'2'}, function(d) {
                    //var arr = $.parseJSON(d);
                    var _ = [];
                    $.each(d, function(i, o) {
                        _.push('<div>');
                        _.push('<div style="margin-top:20px">' + o.name + '</div>');
                        _.push('<div style="color:#c1bec0;font-size:14px">' + o.desc + '</div>');
                        _.push('<div style="color:#ef3e19;font-size:14px">￥' + o.price + '</div>');
                        _.push('<div style="width:164px;height:164px;position:relative;bottom:0;left:40px;background:url(' + o.img + ')"></div>');
                        _.push('</div>');
                    });

                    $('div.content-main').append(_.join(''));
                });

                $('#myTest').click(function() {
                    $.getScript('test.js', function() {
                        fun1();
                    });
                });
            });
        </script>
    </head>

    <body>
        <button id = 'myTest'>测试</button>
        <div class='content-main'>

        </div>
    </body>
</html>
